<template>
	<view class="luckyDraw">
		<view class="edit">
			<form @submit="formSubmit">
				<text class="title">设置薪资</text>
				<view class="editContent">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							上下班时间
						</view>
						<view class="uni-list-cell-db">
							<picker mode="time" :value="dataFrom.startTime" @change="bindStartTimeChange"
								name="startTime">
								<view class="uni-input">{{dataFrom.startTime}}</view>
							</picker>
							<p class="timeStyle">~</p>
							<picker mode="time" :value="dataFrom.endTime" @change="bindEndTimeChange" name="endTime">
								<view class="uni-input">{{dataFrom.endTime}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="editContent">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							午休时间
						</view>
						<view class="uni-list-cell-db">
							<picker mode="time" :value="dataFrom.restStartTime" @change="restStartTimeChange"
								name="restStartTime">
								<view class="uni-input">{{dataFrom.restStartTime}}</view>
							</picker>
							<p class="timeStyle">~</p>
							<picker mode="time" :value="dataFrom.restEndTime" @change="restEndTimeChange"
								name="restEndTime">
								<view class="uni-input">{{dataFrom.restEndTime}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="editContent">
					<p>平均月薪</p> <input type="default" :value="dataFrom.monthlyPay" name="monthlyPay">
				</view>
				<view class="editContent">
					<p>月工作天数</p><input type="default" :value="dataFrom.monthlyWork" name="monthlyWork">
				</view>
				<p class="attention">注：秒薪=平均月薪/月工作天数/(上班时长-午休时长)</p>
				<view class="editContent">
					<button @click="cancel">取消</button>
					<button form-type="submit">确定</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataFrom: {
					monthlyPay: 5000,
					monthlyWork: 22,
					startTime: '08:30',
					endTime: '18:00',
					restStartTime: '12:00',
					restEndTime: '13:30'
				},
			};
		},
		onLoad() {
			if (uni.getStorageSync('pay')) {
				this.dataFrom = uni.getStorageSync('pay')
			}
		},
		methods: {

			bindStartTimeChange: function(e) {
				this.dataFrom.startTime = e.detail.value
			},
			bindEndTimeChange: function(e) {
				this.dataFrom.endTime = e.detail.value
			},
			restStartTimeChange: function(e) {
				this.dataFrom.restStartTime = e.detail.value
			},
			restEndTimeChange: function(e) {
				this.dataFrom.restEndTime = e.detail.value
			},
			cancel(){
					uni.navigateBack()
			},
			formSubmit(e) {
				this.dataFrom = e.detail.value
				uni.setStorageSync('pay', this.dataFrom)
				uni.navigateBack()
			},

		},
	};
</script>

<style lang="less">
	.edit {
		margin: 1rem auto;
		width: 90vw;
		height: 44vh;
		background-color: rgb(250, 213, 86);
		border-radius: 1rem;
		color: black;
		text-align: center;

		.title {
			font-weight: bold;
			font-size: 48rpx;

		}

		.uni-list-cell {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.uni-list-cell-db {
				display: flex;

				.timeStyle {
					padding: 0 .2rem;
				}

				.uni-input {
					width: 20vw;
					height: 5vh;
					line-height: 5vh;
					background-color: white;
					border-radius: .5rem;
				}
			}
		}

		.editContent {
			display: flex;
			justify-content: space-between;
			margin: 1rem;

			input {
				width: 30vw;
				height: 5vh;
				background-color: white;
				border-radius: .5rem;
			}
		}
	}

	.attention {
		font-size: 24rpx
	}
</style>